<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <script src="/js/jquery-3.5.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        body {
            width: 100%;
            height: 100%;
            background-color: #4A374A;
        }

        .loginForm {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -70%);
        }

        .loginForm h1 {
            color: #FFFFFF;
            text-shadow: 0 0 10px;
            letter-spacing: 5px;
            text-align: center;
            margin-bottom: 5px;
        }

        .loginForm input {
            width: 250px;
            height: 20px;
            color: #FFFFFF;
            padding: 10px;
            border-radius: 5px;
            background-color: #2D2D3F;
            border-top: 1px solid #312E3D;
            border-left: 1px solid #312E3D;
            border-right: 1px solid #312E3D;
            border-bottom: 1px solid #56536A;
            margin-bottom: 10px;
        }

        .but {
            width: 272px;
            min-height: 20px;
            display: block;
            background-color: #4a77d4;
            border: 1px solid #3762bc;
            color: #fff;
            padding: 9px 14px;
            font-size: 15px;
            line-height: normal;
            border-radius: 5px;
            margin: 0;
        }
    </style>
</head>
<body>
<div class="loginForm">
    <h1>Login</h1>
    <form id="_form" action="/user/login" method="post">
        <input type="text" placeholder="用户名" name="username"><br>
        <input type="password" placeholder="密码" name="password"><br>
        <button onclick="login()" class="but" type="submit">登录</button>
    </form>
</div>

<script src="/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['element', 'layer', 'util', 'form'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$
            , form = layui.form;
    });
</script>
<script>
    function login() {
        // var username = $('.username').val();
        // var password = $('.password').val();
        $.ajax({
            url: "/user/login",
            method: "POST",
            dataType: "JSON",
            data: $('#_form').serialize()
            // data: {
            //     username: username,
            //     password: password
            // }
        })
    }
</script>
</body>
</html>